<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:replace="~{/_include/header}" />
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/approvals.css}" />
    <title>[[${title ?:'REBUILD'}]]</title>
    <style>
      html,
      body,
      .main-content,
      pre {
        background-color: #fff;
        height: 100%;
        overflow: hidden;
        text-align: center;
        vertical-align: middle;
      }
      .main-content,
      pre.mermaid {
        min-height: 500px;
      }
      pre.mermaid {
        color: #fff;
        padding: 0;
        margin: 0;
      }
      pre.mermaid .edgeLabel,
      pre.mermaid .er.relationshipLabel {
        background-color: #fff !important;
        font-size: 14px;
      }
      pre.mermaid .relationshipLabelBox {
        fill: none !important;
        opacity: 1 !important;
      }
      pre.mermaid .nodeLabel {
        font-size: 14px;
        color: #222;
      }
      pre.mermaid .node rect {
        fill: #e6eff8 !important;
        stroke: #4285f4 !important;
      }
      pre.mermaid .mermaidTooltip {
        display: none;
        font-size: 0;
      }
      .zoom {
        bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="main-content m-0 p-0">
      <pre class="mermaid">
      [(${mermaidData})]
      </pre>
    </div>
    <div class="zoom hide">
      <a class="zoom-in">
        <i class="zmdi zmdi-plus"></i>
      </a>
      <span>100%</span>
      <a class="zoom-out">
        <i class="zmdi zmdi-minus"></i>
      </a>
    </div>
    <th:block th:replace="~{/_include/footer}" />
    <script th:src="@{/assets/lib/charts/mermaid.min.js?v=10.4.0}"></script>
    <script type="text/babel">
      $(document).ready(() => {
        const $node = $('.mermaid')

        mermaid.initialize({
          securityLevel: 'loose',
          startOnLoad: false,
        })
        mermaid
          .run({
            nodes: $node,
          })
          .then(() => {
            $('.zoom').removeClass('hide')
            parent.RbModal.resize()
          })
          .catch((err) => {
            console.error(err)
          })

        let zoom = 100
        function setZoom(z) {
          zoom += z
          if (zoom < 20) zoom = 20
          if (zoom > 500) zoom = 500

          $('.zoom > span').text(zoom + '%')
          $node.css('transform', `scale(${zoom / 100})`)
        }
        $('.zoom .zoom-in').on('click', () => setZoom(10))
        $('.zoom .zoom-out').on('click', () => setZoom(-10))

        $node.draggable({ cursor: 'move', scroll: false })

        $(document).on('mousewheel', (e) => {
          const value = e.originalEvent.wheelDelta || -e.originalEvent.detail
          const delta = Math.max(-1, Math.min(1, value))
          setZoom(delta < 0 ? -10 : 10)
        })
      })

      function nodeClick(a) {
        window.open(`../../entity/${a}/base`)
      }
    </script>
  </body>
</html>
